<template>
  <a-modal :open="true" width="800px" title="选择商家" @ok="onOk" @cancel="onClose">

    <a-form :model="searchState" layout="inline">
      <a-form-item name="keyword">
        <a-input placeholder="名称|联系人|电话" v-model:value="searchState.keyword"></a-input>
      </a-form-item>
      <a-form-item name="province">
        <a-select placeholder="省份" v-model:value="searchState.province" :options="level3"
          :fieldNames="fieldNames" style="width: 120px;"></a-select>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="toSearch">检索</a-button>
          <a-button @click="reset">重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <StoreTable :filter="filter" :action="false" :select="true" selectType="radio" @select="onSelect" class="mt" />

  </a-modal>
</template>

<script setup>
import { ref, onMounted, reactive,toRaw} from 'vue';
import StoreTable from './StoreTable.vue';
import level3 from '@/assets/level3.json'

const props = defineProps(['filter'])
const emit = defineEmits(['close', 'select'])

const fieldNames = {
  label: 'name',
  value: 'name',
}

const searchState = reactive({})
const selected = ref([])
const filter = ref({})

onMounted(() => {

})

const onOk = () => {
  emit('select', toRaw(selected.value))
}

const toSearch = () => {
  filter.value = { ...searchState }
}
const reset = () => {
  searchState.keyword = null
  filter.value = {}
}

const onClose = () => {
  emit('close')
}

const onSelect = (arr) => {
  selected.value = arr;
}


</script>

<style lang="less" scoped></style>